<template>
	<view class="content-wrapper tools-validate-wrapper">
		<view class="">
			<view>中文：</view>
			<view class="">
				<input placeholder="请输入中文" v-model="val1" />	
			</view>
			<button @click="startValidate1" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view class="">
			<view>由数字和大小写字母组成：</view>
			<view class="">
				<input placeholder="请输入" v-model="val2" />	
			</view>
			<button @click="startValidate2" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view class="">
			<view>校验大陆手机号：</view>
			<view class="">
				<input placeholder="请输入" v-model="val3" />	
			</view>
			<button @click="startValidate3" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view class="">
			<view>校验邮箱：</view>
			<view class="">
				<input placeholder="请输入" v-model="val4" />	
			</view>
			<button @click="startValidate4" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view class="">
			<view>校验正整数：</view>
			<view class="">
				<input placeholder="请输入" v-model="val5" />	
			</view>
			<button @click="startValidate5" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view class="">
			<view>校验最多保留两位小数：</view>
			<view class="">
				<input placeholder="请输入" v-model="val6" />	
			</view>
			<button @click="startValidate6" class="validate-btn color-light-grey">开始校验</button>
		</view>
		<view>Author：童雅丽</view>
		<view>暂未在项目中使用</view>
	</view>
</template>

<script>
	import {validateChinese,validateNumAndAlphabet,
	validatePhone,validateEmail,validatePositiveInt,validateTwoDecimal} from '@/utils/jk-validate.js'
	export default {
		data() {
			return {
				val1: null,
				val2: null,
				val3: null,
				val4: null,
				val5: null,
				val6: null,
				okMsg:'校验通过'
			}
		},
		methods: {
			startValidate1() {
				console.log(validateChinese(this.val1))
				let _that = this;
				if(validateChinese(_that.val1) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validateChinese(_that.val1)
					})
				}
			},
			startValidate2() {
				let _that = this;
				if(validateNumAndAlphabet(_that.val2) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validateNumAndAlphabet(_that.val2)
					})
				}
			},
			startValidate3() {
				let _that = this;
				if(validatePhone(_that.val3) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validatePhone(_that.val3)
					})
				}
			},
			startValidate4() {
				let _that = this;
				if(validateEmail(_that.val4) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validateEmail(_that.val4)
					})
				}
			},
			startValidate5() {
				let _that = this;
				if(validatePositiveInt(_that.val5) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validatePositiveInt(_that.val5)
					})
				}
			},
			startValidate6() {
				let _that = this;
				if(validateTwoDecimal(_that.val6) == 1){
					uni.showToast({
						duration:2000,
						title:_that.okMsg
					})	
				}else{
					uni.showToast({
						duration:2000,
						icon:"none",
						title:validateTwoDecimal(_that.val6)
					})
				}
			}
		},
	}
</script>

<style scoped>
.validate-btn{
	border: none;
	width: 200rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	margin: 30rpx auto;
}
</style>